<template>
	<view class="index">
		<searchInput />
		<!-- 轮播 -->
		<swiper indicator-dots autoplay class="index_swiper">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.image_src" alt="" class="cate_img"></image>
			</swiper-item>
		</swiper>
		<!-- 分类 -->
		<view class="index_cate">
			<view v-for="(item,index) in cateList" :key="index" class="index_cate_wrap" @click="toCate">
				<image :src="item.image_src" alt=""></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="index_floor" v-for="(item1,index1) in floorList" :key="index1">
			<view class="floor_group">
				<!-- 标题 -->
				<view class="floor_title">
					<image :src="item1.floor_title.image_src" alt=""></image>
				</view>
				<!-- 内容 -->
				<view class="floor_list">
					<view v-for="(item2,index2) in item1.product_list" :key="index2" class="navigator">
						<image :src="item2.image_src" alt=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		request
	} from '@/utils/tools.js'
	import searchInput from '@/components/searchInput'
	export default {
		components: {
			searchInput
		},
		data() {
			return {
				interval: 1000,
				swiperList: [],
				cateList: [],
				floorList: []
			};
		},
		methods: {
			// 轮播图
			getSwiperList() {
				console.log('首页-轮播图')
				request({
					url: 'home/swiperdata',
					header: {
						'content-type': 'application/json'
					},
				}).then(res => {
					// console.log(res.data.message)
					let swiperList = res.data.message
					this.swiperList = swiperList
					console.log(swiperList);
				})
			},
			// 分类
			getCateList() {
				request({
					url: 'home/catitems',
					header: {
						'content-type': 'application/json'
					},
				}).then(res => {
					// console.log(res)
					this.cateList = res.data.message
				})
			},
			// 底部
			getFloorList() {
				request({
					url: 'home/floordata',
					header: {
						'content-type': 'application/json'
					},
				}).then(res => {
					// console.log(res)
					let floorList = res.data.message
					floorList.forEach(v => {
						v.product_list.forEach(v => {
							v.navigator_url = v.navigator_url.replace(/goods_list/, 'goods_list/main')
							// console.log(v.navigator_url);
						})
					})
					this.floorList = floorList
				})
			},
			toCate(){
				uni.switchTab({
				    url: '/pages/category/index'
				});
			}
		},
		created() {
			this.getSwiperList()
			this.getCateList()
			this.getFloorList()
		}
	};
</script>

<style lang='less'>
	text {
		color: var(--themeColor);
	}
	.index{
		margin-bottom: 100rpx;
	}
	// 轮播
	.index_swiper {
		width: 750rpx;
		height: 340rpx;

		image {
			width: 100%;
		}
	}

	// 分类
	.index_cate {
		display: flex;
		width: 750rpx;
		height: 210rpx;

		.index_cate_wrap {
			padding: 20rpx;
			flex: 1;

		}
	}

	// 楼层
	.index_floor {
		width: 750rpx;

		.floor_group {
			width: 100%;

			// 标题
			.floor_title {
				width: 100%;
				padding: 10rpx 0;

				>img {
					width: 100%;
					height: 60rpx;
				}
			}

			// 图片列表区
			.floor_list {
				// 清除浮动--正常方法
				overflow: hidden;

				.navigator {
					float: left;
					width: 33%;

					&:nth-child(1) {
						// 第1张图片232px*386px
						height: 33.3vw * 386/232;
					}

					// 后4张
					&:nth-last-child(-n + 4) {
						height: 33.3vw * 386/232/2;
						border-left: 5px solid #fff;
					}

					&:nth-child(2),
					&:nth-child(3) {
						border-bottom: 5px solid #fff;
					}

				}
			}
		}
	}
</style>
